<template>
  <div class="container">
    <div class="header">
      <h1>使用手册</h1>
      <div class="back" @click="handleBack">
        <img src="@/assets/images/back.png" alt="" />
      </div>
    </div>
    <div class="main" v-loading="loading">
      <div class="left">
        <div class="up_box">
          <div class="btn" @click="handleUp(1)">
            <img src="@/assets/images/up.png" alt="" />
          </div>
        </div>
        <div class="middle_box" ref="middleBox">
          <div
            :class="[{ selected: item.id == select }, 'item']"
            v-for="item in list"
            :key="item.id"
            @click="handleSelect(item)"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="down_box">
          <div class="btn" @click="handleDown(1)">
            <img src="@/assets/images/down.png" alt="" />
          </div>
        </div>
      </div>
      <div class="right" ref="right_container">
        <div class="right_content" v-html="content"></div>
        <div class="no_data" v-if="!content">
          <i class="el-icon-warning-outline"></i>
          <p>暂无数据</p>
        </div>
      </div>
    </div>
    <div class="left_fixed">
      <div class="item" @click="handleUp(2)">
        <img src="@/assets/images/up.png" alt="" />
      </div>
      <div class="item" @click="handleDown(2)">
        <img src="@/assets/images/down.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime, handleScrollup, handleScrolldown } from "@/utils/index";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

import { get_use_manual } from "@/api/index";
export default {
  data() {
    return {
      handleScrollup,
      handleScrolldown,
      loading: false,
      select: 1,
      content: "",
      list: [],
    };
  },
  computed: {},
  methods: {
    handleUp(type) {
      let el = "";
      switch (type) {
        case 1:
          el = this.$refs.middleBox;
          break;
        case 2:
          el = this.$refs.right_container;
          break;
      }
      this.handleScrollup(el);
    },
    handleDown(type) {
      let el = "";
      switch (type) {
        case 1:
          el = this.$refs.middleBox;
          break;
        case 2:
          el = this.$refs.right_container;
          break;
      }
      this.handleScrolldown(el);
    },
    get_use_manual() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: 1 }
      );
      get_use_manual(data).then((res) => {
        if (res.errcode == 0) {
          this.loading = false;
          if (res.data.length > 0) {
            this.content = res.data[0].content;
          }
          this.list = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    handleSelect(item) {
      this.select = item.id;
      this.content = item.content;
    },
    handleBack() {
      this.$router.back(-1);
    },
  },
  created() {
    this.loading = true;
    this.get_use_manual();
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100%;
  background-color: #f1f0f5;
  position: relative;
}
.header {
  width: 100%;
  height: 0.8125rem;
  background-color: #4fa388;
  box-shadow: 0px 0px 6px 0px rgba(11, 3, 6, 0.08);
  text-align: center;
  line-height: 0.8125rem;
  position: relative;
  h1 {
    font-size: 0.25rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
  .back {
    position: absolute;
    right: 0.25rem;
    top: 0.1rem;
    img {
      width: 0.6625rem;
    }
  }
}

.left_fixed {
  position: fixed;
  bottom: 0.75rem;
  right: 0.625rem;
  width: 0.625rem;
  display: flex;
  flex-direction: column;

  .item {
    width: 0.9375rem;
    height: 0.8rem;
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(11, 3, 6, 0.27);
    border-radius: 0.2875rem;
    margin-bottom: 0.175rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.main {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 0.8125rem);
  overflow: hidden;
  .left {
    width: 3.625rem;
    background-color: #fff;
    height: 100%;
    overflow: hidden;
    .up_box,
    .down_box {
      width: 100%;
      height: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      .btn {
        width: 0.625rem;
        height: 0.575rem;
        background: #ffffff;
        box-shadow: 0px 0px 6px 0px rgba(11, 3, 6, 0.27);
        border-radius: 0.2875rem;
        margin-bottom: 0.175rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .middle_box {
      width: 100%;
      height: calc(100% - 1.25rem - 1.25rem);
      background-color: #fff;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .item {
        width: 100%;
        height: 0.9125rem;
        font-size: 0.25rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #717171;
        text-align: center;
        line-height: 0.9125rem;
        cursor: pointer;
        &.selected {
          background-color: #30866a;
          color: #ffffff;
        }
      }
    }
  }
  .right {
    padding: 0.125rem;
    flex: 1;
    overflow: auto;
    .right_content {
      font-size: 16px;
    }
  }
}
// 暂无数据
.no_data {
  text-align: center;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;

  .el-icon-warning-outline {
    font-size: 0.45rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #303030;
    line-height: 0.475rem;
  }

  p {
    font-size: 0.25rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #303030;
    line-height: 0.475rem;
  }
}
</style>